<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月19日 00:20:18
-->
<template>
  <div class="imgliat">
    <div class="section-box">
      <div v-for="(item, index) in imglist" :key="index" class="imglist_box">
        <div class="imglist_box_img">
          <img
            v-lazy="baseUrl + item.url"
            class="image"
            preview="1"
            :preview-text="item.title"
          />
          <div class="mengban">
            <div>
              上传时间：
              <span>{{ item.createDate }}</span>
            </div>
          </div>
        </div>
        <div class="title_img" :title="item.title">
          {{ item.title == "" ? "上传人太懒啦，没有添加描述哦！" : item.title }}
        </div>
        <div class="imglist_box_body">
          <div class="imglist_box_body_uesr">
            <div style="display: flex; align-items: center">
              <img v-lazy="baseUrl + item.creatuserImg" alt />
              <span class="username" :title="item.creatUserName">{{
                item.creatUserName
              }}</span>
            </div>
            <span class="span_userdaown">
              <span title="点赞量" class="give">{{ item.giveList.length }}人赞过</span>
              <img
                src="../../../assets/dianzan1.png"
                alt
                title="点赞"
                style="height: 19px"
                @click="onGive(item)"
                v-if="!givelist(item)"
              />
              <img
                src="../../../assets/dianzan.png"
                alt
                title="已点赞"
                style="width: 18px; height: 18px"
                v-if="givelist(item)"
              />
              <img
                src="../../../assets/xiazai.png"
                alt
                title="下载图片"
                @click="download(item)"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
    <footer v-if="imglist.length != 0">
      <a-button type="primary" icon="arrow-down" @click="lookList" v-if="!listNull"
        >查看更多</a-button
      >
      <p v-else>暂无更多数据哦 ~</p>
    </footer>
    <a-empty
      v-if="imglist.length == 0"
      description="找不到图片啦，去添加点吧！"
      style="width: 100%; margin-top: 100px"
    />
  </div>
</template>
<script>
import { requset } from "@/api";
import { downloadEvt } from "@/utils/download";
import EventBus from "@/utils/EventBus";

export default {
  name: "imgliat",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      modalimgsrc: "",
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      imglist: [],
      pageIndex: 1,
      pageSize: 10,
      id: "",
      listNull: false,
      searchValue: "",
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {
    this.getlist();
    this.$previewRefresh();
    EventBus.$on("onSearch", (searchValue) => {
      this.searchValue = searchValue;
      this.Search(searchValue);
    });
  },
  /**所有方法*/
  methods: {
    Search(searchValue) {
      this.imglist = [];
      if (searchValue != "") {
        let params = {
          title: searchValue,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          classId: this.id,
        };
        requset("post", "/homeImg/searchImg", params).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.listNull = true;
            }
            this.imglist.push(...res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        this.getlist();
      }
    },
    lookList() {
      this.pageIndex++;
      if (this.searchValue == "") {
        this.getlist();
      } else {
        let params = {
          title: this.searchValue,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          classId: this.id,
        };
        requset("post", "/homeImg/searchImg", params).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.listNull = true;
            }
            this.imglist.push(...res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    getlist() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        classId: this.id,
      };
      requset("post", "/homeImg/list", params).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data.length == 0) {
            this.listNull = true;
          }
          this.imglist.push(...res.data.data);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 点赞
    onGive(item) {
      if (!localStorage.getItem("token") && !this.userInfo) {
        let that = this;
        this.$confirm({
          title: "提示",
          content: "检测到您未登陆，请先登录？",
          cancelText: "取消",
          okText: "确定登陆",
          onOk() {
            that.$router.push("/login");
          },
          onCancel() {},
        });
      } else {
        let params = {
          imgId: item.imgId,
          userId: this.userInfo.userId,
        };
        requset("post", "/homeImg/give", params).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.imglist = [];
            this.getlist();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    givelist(item) {
      let giveshow = false;
      if (this.userInfo) {
        item.giveList.forEach((item) => {
          if (this.userInfo.userId == item) {
            giveshow = true;
          }
        });
      }
      return giveshow;
    },
    // 下载
    download(item) {
      downloadEvt(item.url, "嘻哩嘻哩 - 图片.png");
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.imgliat,
.section-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

img,
.imglist_box_img {
  width: 100%;
}
.imglist_box_img {
  height: 150px;
  overflow: hidden;
  position: relative;
}
.imglist_box {
  width: 320px;
  height: 230px;
  margin: 10px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 5px 4px 9px 0px #b4d2e3;
  transition: All 0.8s ease-in-out;
}
.imglist_box_body {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.imglist_box_body_uesr {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.imglist_box_body_uesr img {
  width: 35px;
  border-radius: 50%;
}
.imglist_box:hover {
  cursor: pointer;
  box-shadow: 5px 4px 9px 0px #a8a8d0;
  transform: scale(1.05);
}
.imglist_box_img .image {
  transition: All 0.4s ease-in-out;
}

.imglist_box_img:hover .image {
  cursor: pointer;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
.mengban {
  width: 100%;
  height: 15%;
  background: rgb(123 120 120 / 50%);
  position: absolute;
  bottom: 0;
  display: none;
}
.imglist_box:hover .mengban {
  display: block;
}
.mengban > div {
  color: #fff;
  padding: 0 10px;
}
.username {
  margin-left: 10px;
  color: #1890ff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 80px;
}
.give {
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  color: #b1b1b1;
  width: 80px;
}
.span_userdaown {
  display: flex;
  align-items: center;
}
.span_userdaown img {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

footer {
  width: 100%;
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
.title_img {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  word-break: break-all; /* 内容自动换行 */
  padding: 5px 0px;
  width: 92%;
  margin: 0 10px;
  font-size: 12px;
  color: #6658ca;
  /* border-bottom: 1px dashed; */
}

/* 如果浏览器窗口小于 600px */
@media only screen and (max-width: 600px) {
  .imglist_box {
    width: 100%;
  }
}
</style>
